// 新建会员卡
<template>
  <div class="cus-label-div">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="包邮卡" name="1">
        <div class="el-row-div">
          <el-row :gutter="20">
            <el-col :span="6" v-for="(val, inx) in card" :key="inx"
              ><div class="grid-content bg-purple">
                <!--  -->
                <template>
                  <div
                    class="clearfix"
                    :style="{ backgroundColor: val.color1 }"
                  >
                    <h2>{{ val.name }}</h2>
                    <img :src="val.imageUrl" alt="" />
                    <p>有效期:无限</p>
                  </div>
                </template>
              </div></el-col
            >
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <div class="grid-content bg-purple">
                  <div
                    class="clearfixx"
                    style="cursor: pointer"
                    @click="creatcard"
                  >
                    <span>+</span>
                    <p>新建会员卡</p>
                  </div>
                </div>
              </div></el-col
            >
          </el-row>
        </div>
      </el-collapse-item>
      <!--  -->
      <el-collapse-item title="折扣卡" name="2">
        <el-col :span="6" v-for="(val, inx) in cardd" :key="inx"
          ><div class="grid-content bg-purple">
            <!--  -->
            <template>
              <div class="clearfix" :style="{ backgroundColor: val.color1 }">
                <h2>{{ val.name }}</h2>
                <img :src="val.imageUrl" alt="" />
                <p>有效期:无限</p>
              </div>
            </template>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <div class="grid-content bg-purple">
              <div class="clearfixx" style="cursor: pointer" @click="creatcard">
                <span>+</span>
                <p>新建会员卡</p>
              </div>
            </div>
          </div></el-col
        >
      </el-collapse-item>
      <el-collapse-item title="积分卡" name="3">
        <el-col :span="6" v-for="(val, inx) in carddd" :key="inx"
          ><div class="grid-content bg-purple">
            <!--  -->
            <template>
              <div class="clearfix" :style="{ backgroundColor: val.color1 }">
                <h2>{{ val.name }}</h2>
                <img :src="val.imageUrl" alt="" />
                <p>有效期:无限</p>
              </div>
            </template>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <div class="grid-content bg-purple">
              <div class="clearfixx" style="cursor: pointer" @click="creatcard">
                <span>+</span>
                <p>新建会员卡</p>
              </div>
            </div>
          </div></el-col
        >
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<style lang='scss' scoped>
.cus-label-div {
  background: rgb(255, 255, 255);
  height: 700px;
  // border: 1px solid red;

  padding: 10px;
}
</style>
<style lang='scss' scoped>
@import "../assets/scss/baseColor";
.table-div {
  margin-top: 20px;
}
.divdiv {
  margin-top: 20px;
  margin-left: -1100px;
}

.humandiv {
  height: 50px;
  width: 100%;
  background-color: $back-color;
  border: 1px solid rgb(255, 255, 255);
  margin: 0 auto;
  margin-top: 30px;
}
.cus-label-div {
  background: rgb(255, 255, 255);
  height: 700px;
  padding: 10px;

  .midSpan {
    margin-left: 20px;
    margin-top: 10px;
    border-left: 3px solid red;
    display: block;
    padding: 3px;
    width: 100px;
    height: 20px;
  }
  .clearfixx {
    height: 200px;
    background-color: rgb(229, 229, 229);
    text-align: center;

    span {
      font-size: 100px;
      color: rgb(255, 255, 255);
    }
    p {
      margin-top: -40px;
      color: rgb(43, 141, 221);
      font-size: 15px;
      letter-spacing: 1px;
    }
  }
  .clearfix {
    img {
      width: 100px;
      height: 100px;
      margin-left: 140px;
      margin-top: -60px;
    }
    height: 200px;
    border-radius: 5%;
    box-shadow: 1px 2px 5px -1px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 1px 2px 5px -1px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 1px 2px 5px -1px rgba(0, 0, 0, 0.75);
    h2 {
      margin-left: 30px;

      width: 100px;
      height: 70px;
    }
    p {
      font-size: 15px;
      font-weight: 800;
      margin-top: 40px;
      margin-left: 20px;
    }
    .clear-divtwo {
      text-align: center;
      span {
        display: inline-block;
        margin-top: 15px;
        padding: 0 0 10px 0;
      }

      button {
        color: rgb(43, 141, 221);
        border: 1px solid rgb(44, 140, 218);
        background-color: rgb(255, 255, 255);
        padding: 5px 30px 5px 30px;
        border-radius: 5%;
      }
      .buttonone {
        margin-left: 0px;
      }
      .buttontwo {
        margin-left: 20px;
      }
    }
    .clear-divoneone {
      text-align: center;
      height: 80px;
      background-color: rgb(67, 207, 124);
      line-height: 80px;
      color: rgb(255, 255, 255);
      font-size: 10;
    }
    .clear-divone {
      height: 80px;
      background-color: rgb(92, 181, 255);
      line-height: 80px;
      color: rgb(255, 255, 255);
      font-size: 10;
      text-align: center;
      border: 1px solid red;
    }
  }
  .el-row-div {
    margin-top: 15px;
  }

  .maxHuman {
    height: 50px;
    width: 100%;
    background-color: $back-color;
    border: 1px solid rgb(255, 255, 255);
    margin: 0 auto;
  }
}
</style>
<style>
.el-collapse-item__arrow {
  color: rgb(64, 158, 255);
}
.el-collapse-item__header {
  font-weight: 800;
  font-size: 15px;
}
</style>
<script>
export default {
  data() {
    return {
      activeNames: ["1"],

      card: this.$store.state.cusStore.card,
      cardd: this.$store.state.cusStore.cardd,
      carddd: this.$store.state.cusStore.carddd,
    };
  },

  methods: {
    creatcard() {
      this.$router.push("/customercreatememberscard");
    },
  },

  computed: {
    getCardPow() {
      return this.$store.state.cusStore.cardd;
    },
    getCardPowe() {
      return this.$store.state.cusStore.carddd;
    },
    getCardPower() {
      return this.$store.state.cusStore.card;
    },
  },
};
</script>